<template>
  <div class="page">
    <HeaderBar :fixed="true" :theme="theme" :active="'technology'"/>
    <div class="page-main">
      <div class="banner">
        <img oncontextmenu="return false" :src="info.tech_photo" class="fit-img" alt="" />
        <div class="banner-inner">
          <div class="banner-title wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s">{{ info.tech_title }}</div>
          <div class="banner-desc wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s" v-html="info.tech_titles"></div>
        </div>
        <div class="banner-arr">
          <img src="@/assets/images/arr_d.svg" class="icon">
        </div>
      </div>
      <div class="tech-content">
        <div class="content wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s" v-html="info.tech_content"></div>
      </div>
      <div class="design-box">
        <div class="design-box-title">设计理念</div>
        <div class="design-tabs">
          <div class="tab hv-opacity" v-for="(item, index) in designList" :key="index" :class="{active: curDesignId === item.id}" @click="changeDesign(item.id)">{{ item.title }}</div>
        </div>
        <div class="design-banner">
          <div class="banner-card" v-for="(item, index) in designList" :key="index" :class="{active: curDesignId === item.id}">
            <img oncontextmenu="return false" :src="item.photo" class="fit-img">
            <div class="db-inner">
              <div class="title wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s">{{ item.title }}</div>
              <div class="desc wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s" v-html="item.titles"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="reward-box">
        <img oncontextmenu="return false" :src="info.tech_prize_photo" class="reward-banner-img">
        <div class="reward-inner">
          <div class="title  wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s">{{ info.tech_prize_title }}</div>
          <div class="desc wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s" v-html="info.tech_prize_content"></div>
        </div>
      </div>
      <div class="honor-box">
        <div class="honor-hd">
          <div class="honor-left">
            <div class="honor-title wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s">奖项与荣誉</div>
            <div class="honor-tabs wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s">
              <div class="tab hv-opacity" @click="changeRewardCate(item.id)" :class="{'active': curRewardCateId == item.id}" v-for="(item, index) in rewardCateList" :key="index">
                {{ item.title }}
              </div>
            </div>
          </div>
          <div class="honor-nav">
            <div class="prev-btn flex-center">
              <i class="iconfont icon-arrow_left"></i>
            </div>
            <div class="next-btn flex-center">
              <i class="iconfont icon-arrow"></i>
            </div>
          </div>
        </div>
        <div class="reward-main">
          <div class="reward-swiper swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="cate-card">
                  <img oncontextmenu="return false" src="@/assets/images/hd_logo.png" alt="" class="cate-img">
                  <div class="card-icon">
                    <img oncontextmenu="return false" :src="curRewardCate.photo" class="contain-img">
                  </div>
                  <div class="card-label">{{ curRewardCate.titles }}</div>
                  <div class="card-content">{{ curRewardCate.content }}</div>
                </div>
              </div>
              <div class="swiper-slide" v-for="(item, index) in rewardList" :key="index">
                <div class="reward-card">
                  <div class="photo">
                    <img oncontextmenu="return false" :src="item.photo" class="fit-img">
                  </div>
                  <div class="title text-nowrap">{{ item.title }}</div>
                  <div class="desc text-nowrap">{{ item.titles }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FooterBar />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { formatText, hideLoading } from '../../utils/utils'
import { getTechHomeInfo, getTechDesignList, getRewardCateList, getRewardList } from '@/api/tech' 
import Swiper from 'swiper'
import { Mousewheel, Navigation } from 'swiper/modules'
import 'swiper/scss';
import 'swiper/scss/navigation';
import WOW from 'wow.js'

import HeaderBar from '@/components/HeaderBar/index.vue'
import FooterBar from '@/components/FooterBar/index.vue'

const theme = ref('transparent')
const info = ref({})
const designList = ref([])
const curDesignId = ref(-1)
const curRewardCate = ref({})
const curRewardCateId = ref(0)
const rewardCateList = ref([])
const rewardList = ref([])
let rewardSwiper

onMounted(() => {
  loadData()
  loadRewardCateList()
  window.addEventListener('scroll', (event) => {
    const scrollTop = window.scrollY
    if (scrollTop > 100) {
      theme.value = 'white'
    } else {
      theme.value = 'transparent'
    }
  });
  const wow = new WOW({
    offset: 100
  })
  wow.init()
});

const loadData = () => {
  getTechHomeInfo().then(res => {
    info.value = res.data.list
    info.value.tech_titles = formatText(res.data.list.tech_titles)
    info.value.tech_content = formatText(res.data.list.tech_content)
    info.value.tech_prize_content = formatText(res.data.list.tech_prize_content)
    hideLoading()
  })
  getTechDesignList().then(res => {
    designList.value = res.data.map(el => {
      el.titles = formatText(el.titles)
      return el
    })
    curDesignId.value = res.data[0].id
  })
};

const loadRewardCateList = () => {
  getRewardCateList().then(res => {
    rewardCateList.value = res.data
    curRewardCateId.value = res.data[0].id
    curRewardCate.value = res.data[0]
    loadRewards()
  })
}

const changeDesign = (id) => {
  curDesignId.value = id
};

const loadRewards = () => {
  getRewardList({ cate_id: curRewardCateId.value }).then(res => {
    rewardList.value = res.data
    setTimeout(() => {
      initRewardSwiper()
    }, 200)
  })
};

const changeRewardCate = id => {
  curRewardCateId.value = id
  curRewardCate.value = rewardCateList.value.find(el => el.id === id)
  loadRewards()
};

const initRewardSwiper = () => {
  if (!rewardSwiper) {
    rewardSwiper = new Swiper('.reward-swiper', {
      modules: [Mousewheel, Navigation],
      mousewheel: false,
      slidesPerView: 'auto',
      spaceBetween: 50,
      navigation: {
        nextEl: '.next-btn',
        prevEl: '.prev-btn',
      },
    })
  } else {
    rewardSwiper.update()
    rewardSwiper.slideTo(0)
  }
  
};
</script>

<style lang="scss">
@use '@/assets/style/common.scss';
.page {
  width: 100%;
  height: 100%;
}
.banner {
  width: 100%;
  height: 100vh;
  position: relative;
}
.banner-arr {
  width: .75rem /* 12/16 */;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2.5rem /* 40/16 */;
  .icon {
    width: 100%;
    animation: arr infinite linear 1s;
  }
}
@keyframes arr {
  0% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(2px);
  }
}
.banner-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40rem /* 640/16 */;
  z-index: 10;
  .banner-title {
    text-align: center;
    color: #FFFFFF;
    font-size: 3.125rem /* 50/16 */;
    line-height: 1;
    font-weight: 500;
  }
  .banner-desc {
    margin-top: 1.875rem /* 30/16 */;
    font-size: 1.0625rem /* 17/16 */;
    line-height: 2.375rem /* 38/16 */;
    text-align: center;
    color: #F2F2F2;
  }
}
.tech-content {
  background: url(@/assets/images/tech/tech_bg.jpg) no-repeat center center/cover;
  padding: 7.5rem /* 120/16 */;
  .content {
    font-size: 1.625rem /* 26/16 */;
    line-height: 5rem /* 80/16 */;
    color: #000000;
    font-weight: 500;
    text-align: center;
  }
}
.design-box {
  background: #FAFAFA;
  padding: 6.875rem /* 110/16 */ 0 0;
}
.design-box-title {
  font-size: 2.8125rem /* 45/16 */;
  line-height: 1;
  color: #000000;
  font-weight: 500;
  margin-left: 5rem /* 80/16 */;
}
.design-tabs {
  padding: 0 5rem /* 80/16 */;
  margin-top: 3.125rem /* 50/16 */;
  display: flex;
  align-items: center;
  .tab {
    padding-bottom: 1.25rem /* 20/16 */;
    position: relative;
    font-size: 1.0625rem /* 17/16 */;
    line-height: 1.125rem /* 18/16 */;
    color: #595757;
    &.active {
      color: #E50012;
      font-weight: 500;
      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        position: absolute;
        background: #E50012;
        bottom: 0;
        left: 0;
        z-index: 2;
      }
    }
    &+.tab {
      margin-left: 3.4375rem /* 55/16 */;
    }
  }
}
.design-banner {
  width: 100%;
  height: 41.66vw;
  position: relative;
 
}
.banner-card {
  width: 100%;
  height: 41.66vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease-in-out;
  &.active {
    visibility: visible;
    opacity: 1;
  }
  .db-inner {
    position: absolute;
    left: 5rem /* 80/16 */;
    bottom: 5rem /* 80/16 */;
    z-index: 10;
    .title {
      font-size: 1.625rem /* 26/16 */;
      line-height: 36px;
      color: #FFFFFF;
      font-weight: 500;
    }
    .desc {
      margin-top: 1.25rem /* 20/16 */;
      color: #FFFFFF;
      font-size: 1.125rem /* 18/16 */;
      line-height: 2.5rem /* 40/16 */;
      width: 41.875rem /* 670/16 */;
      text-align: justify;
    }
  }
}
.reward-box {
  position: relative;
  .reward-banner-img {
    width: 100%;
  }
  .reward-inner {
    position: absolute;
    width: 28vw;
    right: 12.5vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    .title {
      font-size: 2.8125rem /* 45/16 */;
      line-height: 1;
      color: #FFFFFF;
      font-weight: 500;
    }
    .desc {
      margin-top: 2.875rem /* 46/16 */;
      font-size: 1.125rem /* 18/16 */;
      line-height: 2.5rem /* 40/16 */;
      color: #FFFFFF;
    }
  }
}
.honor-nav {
  display: flex;
  align-items: center;
  .next-btn, .prev-btn {
    width: 3.125rem /* 50/16 */;
    height: 3.125rem /* 50/16 */;
    border-radius: 50%;
    background: #F2F2F2;
    cursor: pointer;
    &:hover {
      background: #E50012;
      .iconfont {
        color: #FFFFFF;
      }
    }
    .iconfont {
      font-size: 1.125rem /* 18/16 */;
      color: #000000;
    }
  }
  .next-btn {
    margin-left: 1.125rem /* 18/16 */;
  }
}
.honor-box {
  padding: 6.875rem /* 110/16 */ 0 7.5rem /* 120/16 */;
  background: #FFFFFF;
}
.honor-hd {
  padding: 0 5rem /* 80/16 */;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.honor-left {
  .honor-title {
    font-size: 2.8125rem /* 45/16 */;
    line-height: 1;
    font-weight: 500;
    color: #000000;
  }
  .honor-tabs {
    display: flex;
    align-items: center;
    margin-top: 2.9375rem /* 47/16 */;
    padding-bottom: 1.1875rem /* 19/16 */;
    border-bottom: 1px solid #F2F2F2;
    .tab {
      font-size: 1.0625rem /* 17/16 */;
      line-height: 1.125rem /* 18/16 */;
      color: #595757;
      position: relative;
      &.active {
        color: #E50012;
        font-weight: 500;
        &::after {
          content: '';
          display: block;
          width: 100%;
          height: 2px;
          position: absolute;
          background: #E50012;
          bottom: -1.1875rem /* 19/16 */;
          left: 0;
          z-index: 2;
        }
      }
      &+.tab {
        margin-left: 3.4375rem /* 55/16 */;
      }
    }
  }
}
.reward-main {
  margin-top: 3.75rem /* 60/16 */;
  width: 100%;
  height: 31.25rem /* 500/16 */;
  .reward-swiper {
    width: 100%;
    height: 31.25rem /* 500/16 */;
  }
  .swiper-slide {
    width: 22.5rem /* 360/16 */;
    height: 31.25rem /* 500/16 */;
    &:first-child {
      margin-left: 5rem /* 80/16 */;
    }
    &:last-child {
      margin-right: 5rem /* 80/16 */;
    }
  }
}
.cate-card {
  width: 22.5rem /* 360/16 */;
  height: 30.625rem /* 490/16 */;
  background: #FFFFFF;
  border-radius: 2px;
  overflow: hidden;
  // box-shadow: 0px 0px 1.875rem /* 30/16 */ 0px #2D333D;
  box-shadow: 0 .625rem /* 10/16 */ 1.25rem /* 20/16 */ 0 rgba(0, 0, 0, 0.05);
  position: relative;
  padding: 5.6875rem /* 91/16 */ 2.5rem /* 40/16 */ 0 1.8125rem /* 29/16 */;
  .cate-img {
    width: 25.3125rem /* 405/16 */;
    position: absolute;
    right: -14.6875rem /* 235/16 */;
    top: 0;
    z-index: 1;
  }
  .card-icon {
    width: 6.5625rem /* 105/16 */;
    height: 6.5625rem /* 105/16 */;
    position: relative;
    z-index: 10;
  }
  .card-label {
    margin-top: 5.9375rem /* 95/16 */;
    font-size: 1.5625rem /* 25/16 */;
    line-height: 1;
    color: #000000;
    font-weight: 500;
  }
  .card-content {
    margin-top: 1.875rem /* 30/16 */;
    font-size: .9375rem /* 15/16 */;
    line-height: 2;
    color: #595757;
  }
}
.reward-card {
  width: 22.5rem /* 360/16 */;
  height: 30.625rem /* 490/16 */;
  border-radius: 2px;
  overflow: hidden;
  .photo {
    width: 100%;
    height: 24.375rem /* 390/16 */;
    border-radius: 2px;
    overflow: hidden;
    padding: 4.0625rem /* 65/16 */ 0;
    background: #F2F2F2;
  }
  .title {
    margin-top: 2.8125rem /* 45/16 */;
    line-height: 1;
    color: #000000;
    font-weight: 500;
  }
  .desc {
    margin-top: .9375rem /* 15/16 */;
    font-size: 1rem /* 16/16 */;
    line-height: 1.25rem /* 20/16 */;
    color: #595757;
  }
}
</style> 

